<template>
  <div class="article-edit">
    <a-form
    class="article-form"
    :model="state.articleInfo"
    :label-col="{ span: 2 }"
    :wrapper-col="{ span: 22 }"
  >
    <a-form-item label="文章标题">
      <a-input v-model:value="state.articleInfo.articleTitle" />
    </a-form-item>
    <a-form-item label="原创">
      <a-switch v-model:checked="state.articleInfo.isOriginal" />
    </a-form-item>
    <a-form-item label="文章类型">
      <a-select v-model:value="state.articleInfo.categoryId" style="width: 200px">
        <a-select-option v-for="c in state.categories" v-model:value="c.categoryId">
          {{ c.categoryName }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="文章标签">
      <a-tag v-for="(tag, index) in state.articleInfo.articleTags" :key="index" closable color="processing">
        {{ tag }}
      </a-tag>
      <a-input
        v-if="state.tag.inputVisible"
        ref="inputRef"
        type="text"
        size="small"
        :style="{ width: '78px' }"
        v-model:value="state.tag.inputValue"
        @blur="handleTagInputConfirm"
        @keyup.enter="handleTagInputConfirm"
      />
      <a-tag v-else @click="showTagInput" style="background: #fff; border-style: dashed">
        <PlusOutlined />
      </a-tag>
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 2 }">
      <a-textarea v-model:value="state.articleInfo.articleContent" :rows="20" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 3, offset: 2 }">
      <a-button type="primary" block @click="publishArticle">发布文章</a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
import {defineComponent, reactive } from "vue";
import { PlusOutlined } from '@ant-design/icons-vue';
import Axios from "../../utils/http-util";
import BackendUrl from "../../constants/backend-url";

const state = reactive({
  formLayout: 'horizontal',
  categories: [],
  articleInfo: {
    articleTitle: '',
    isOriginal: true,
    categoryId: '',
    articleTags: ['Java', 'Python', 'Go'],
    articleContent: ''
  },
  tag: {
    inputVisible: false,
    inputValue: ''
  }
});

const showTagInput = () => {
  state.tag.inputVisible = true;
};

const handleTagInputConfirm = () => {
  const inputValue = state.tag.inputValue;
  let tags = state.articleInfo.articleTags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  state.articleInfo.articleTags = tags;
  state.tag.inputVisible = false;
  state.tag.inputValue = '';
};

const getCategories = () => {
  Axios.get(BackendUrl.blog.category.GET_ALL_CATEGORY).then(res => {
    state.categories = res.data;
  });
};

const publishArticle = () => {
  console.log(state.articleInfo);
  // Axios.post(BackendUrl.blog.article.PUBLISH_ARTICLE, state.articleInfo).then(res => {
  //   console.log(this.articleInfo);
  // });
};

export default defineComponent({
  setup() {
    getCategories();

    return {
      state,

      showTagInput,
      handleTagInputConfirm,
      publishArticle
    };
  },
  components: {
    PlusOutlined
  }
});
</script>

<style scoped lang="scss">
.article-edit {
  .article-form {
    text-align: left;
  }
}
</style>
